<template>
  <div id="">
    <headerbox :headerTitle="'群组消息'" :hasBack="true" :headerRightTxt="'完成'" @headerRightEvent="headerRightEvent"></headerbox>
    <div class="yourHeadimg" align="center":style="{backgroundImage:'url('+require('@/assets/groupImage/headportrait.png')+')'}">
      <img :src="imgUrlLink(myGroup.groupIcon)" alt="" width="60">
      <p class="mt10">点击更换头像</p>
      <uploadImg class="uploadIpt" @uploadImgEvent="uploadImgEvent"></uploadImg>
    </div>
    <ul class="formList">
      <li>
        <span>群组名称</span>
        <input type="text" name="" v-model="myGroup.groupName" placeholder="给你的群组取个名字吧">
      </li>
      <li>
        <span>群主</span>
        <input type="text" name="" readonly v-model="hostName" placeholder="">
      </li>
      <li>
        <span>群组简介</span>
        <textarea name="" rows="5" v-model="myGroup.groupDescribe" placeholder="添加群简介，让你的群更吸引人"></textarea>
      </li>
        <!-- <span>添加的好友</span> -->

         <!-- <p style="color:#999;">已选{{groupUserids.length || 0}}个好友</p> -->
    </ul>
    <div class="p10 bgWhite" @click="toAddfriends">
      <span v-for="(elem,index) in myGroup.members" :key="elem.key" class="ml10">
        <img :src="imgUrlLink(elem.headPortrait)" alt="" width="40" height="40" style="border-radius:100%;">
      </span>
    </div>
    <router-view class="childrenPage"></router-view>
    <div class="fixedButtom p10">
      <button type="button" name="button" class="blockButton" v-if="myGroup.userId==memberId" @click="dismissGroup">解散群组</button>
      <button type="button" name="button" class="blockButton" v-else @click="quitGroup">退出群组</button>
    </div>
  </div>
</template>
<script>
import {circleGroupUpdate,circleGroupInfo,circleGroupJoin,circleGroupQuit,circleGroupDismiss} from '@/utils/ajaxRequest.js';
import { toChildrenPage } from '@/utils/util.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    name:'',
    hostName:'',    //群主，本人
    myGroup:'',     //群组信息
    token:'',     //用户token
    memberId:'',    //当前用户id
  }),
  components: {
    uploadImg:()=>import('@/components/uploadImg/uploadImg'),
  },
  computed: {
    ...mapState({
      groupUserids:state=>state.friendRongStore.groupUserids,
    })
  },
  methods: {
    ...mapMutations(['setGroupUserIds','setGroupUsers']),
    // 上传图片
    uploadImgEvent(data) {
      this.groupJson.groupIcon = data;
    },
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 跳转好友界面，选择好友添加
    toAddfriends() {
      toChildrenPage(this,'chooseFriends');
    },
    // 完成
    headerRightEvent(data) {
      console.log(this.token);
      let self = this;
      let groupParam = {
        token:this.token,
        groupId:this.myGroup.id,
        groupName:this.myGroup.groupName,
        groupIcon:this.myGroup.groupIcon,
        groupDescribe:this.myGroup.groupDescribe
      };
      for (var key in groupParam) {
        console.log(groupParam[key]);
        if (groupParam[key]=='') {
          self.toast(key+'为空');
          return false;
          // break;
        }
      }
      console.log(groupParam);
      circleGroupUpdate(groupParam).then(res=>{   //更新群组
        console.log(res);
        if(res) {
          self.toast(res.data.msg);
          self.$router.go(-1);
        }
      })
    },
    // 解散群组
    dismissGroup() {
      let self = this;
      circleGroupDismiss({
        token:self.token,
        groupId:self.myGroup.id,
      }).then(res=>{
        console.log(res);
        if (res) {
          self.toast(res.data.msg);
          self.$router.go(-2);    //返回群组列表
        }
      })
    },
    // 退出群组
    quitGroup() {
      let self = this;
      circleGroupQuit({
        token:self.token,
        groupId:self.myGroup.id,
      }).then(res=>{
        console.log(res);
        if (res) {
          self.toast(res.data.msg);
          self.$router.go(-2);    //返回群组列表
        }
      })
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let groupId = this.$route.query.groupId;
    this.groupId = groupId;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.hostName = xlyd_loginInfo.nickName;
    this.token = xlyd_loginInfo.token;
    this.memberId = xlyd_loginInfo.id;

    circleGroupInfo({
      token:xlyd_loginInfo.token,
      groupId:groupId
    }).then(res=>{
      console.log(res);
      if(res) {
        self.myGroup = res.data.result;
      }
    })
    this.$nextTick(()=>{
      console.log(this.groupUserids.length);
      if (this.groupUserids.length>0) {
        circleGroupJoin({
          token:xlyd_loginInfo.token,
          groupId:groupId,
          userIds:this.groupUserids.join(','),
        }).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            // self.$router.go(0);
          }
        })
      }else {
        console.log('没有选择好友');
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.yourHeadimg{
  text-align: center;
  padding: 40px 0;
  text-align: center;
  position: relative;
  background-position: center center;
  background-size: 60px 60px;
  background-repeat: no-repeat;
  .uploadIpt{
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    bottom: 0; width: 100%;
    opacity: 0;
  }
  img{
    width: 80px;
    height: 80px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}
.formList li textarea{
  width: auto;
  @include flexcell;
  margin-top: 0;
  margin-left: 10px;
}
</style>
